<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
    <link rel="stylesheet" href="../../../lib/layui/css/layui.css">
    <link rel="stylesheet" href="../../../assets/icons/iconfont.css">
    <link rel="stylesheet" href="../../css/common.css">
    <link rel="stylesheet" href="../../css/list.css">
</head>
<body class="iframe">
<div>
    <div class="common-query">
        <div class="query-title">常用查询
            <span class="advance-search">高级检索<i class="layui-icon layui-icon-right"></i></span>
        </div>
        <form action="" class="layui-form">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">单位</label>
                    <div class="layui-input-inline">
                        <select name="modules" lay-search lay-verify="required">
                            <option value="">请选择单位</option>
                            <option value="1">东部城区</option>
                            <option value="2">背景科学研究院</option>
                            <option value="3">东部城区</option>
                            <option value="4">东部城区</option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">角色</label>
                    <div class="layui-input-inline">
                        <select name="" lay-search lay-verify="required">
                            <option value="">请选择角色</option>
                            <option value="1">管理员</option>
                            <option value="2">普通用户</option>
                            <option value="2">客户</option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">姓名</label>
                    <div class="layui-input-inline">
                        <input type="tel" name="phone" lay-verify="required|phone" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">单位</label>
                    <div class="layui-input-inline">
                        <input type="text" name="email" lay-verify="email" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">角色</label>
                    <div class="layui-input-inline">
                        <input type="text" name="email" lay-verify="email" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <button class="layui-btn layui-btn-normal"><i class="iconfont icon-search"></i>查询</button>
                    <button class="layui-btn layui-btn-warm"><i class="layui-icon layui-icon-delete"></i>清空</button>
                </div>
            </div>
        </form>
    </div>
    <div class="common-query">
        <div class="query-title">数据列表
            <span class="advance-search">
                <button class="layui-btn layui-btn-normal" onclick="_fn.add()"><i
                        class="layui-icon layui-icon-add-1"></i>添加</button>
                <button class="layui-btn layui-btn-normal" onclick="_fn.onBulkRemove()"><i
                        class="layui-icon layui-icon-delete"></i>批量删除</button>
            </span>
        </div>
        <div class="x-table-box">
            <table id="myTable" lay-filter="myTable"></table>
        </div>
    </div>
</div>

<!-- 编辑弹窗 -->
<div class="x-edit-box" id="editBox">
    <form class="layui-form" action="">
        <div class="layui-row">
            <div class="layui-col-xs6">
                <div class="layui-form-item">
                    <label class="layui-form-label"><i class="x-required-tip">*</i>用户账号</label>
                    <div class="layui-input-inline">
                        <input type="text" name="title" required lay-verify="required" placeholder="请输入标题"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-row">
            <div class="layui-col-xs6">
                <div class="layui-form-item">
                    <label class="layui-form-label"><i class="x-required-tip">*</i>用户姓名</label>
                    <div class="layui-input-inline">
                        <input type="password" name="password" required lay-verify="required" placeholder="请输入密码"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-col-xs6">
                <div class="layui-form-item">
                    <label class="layui-form-label">用户状态</label>
                    <div class="layui-input-inline">
                        <select name="city" lay-verify="required">
                            <option value=""></option>
                            <option value="0">北京</option>
                            <option value="1">上海</option>
                            <option value="2">广州</option>
                            <option value="3">深圳</option>
                            <option value="4">杭州</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-row">
            <div class="layui-col-xs10">
                <div class="layui-form-item">
                    <label class="layui-form-label"><i class="x-required-tip">*</i>所属单位</label>
                    <div class="layui-input-inline">
                        <input type="text" name="title" required lay-verify="required" placeholder="请输入标题"
                               autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-col-xs2">
                <div class="layui-btn x-select-button" onclick="_fn.onSelectUnit()">选择单位</div>
            </div>
        </div>
        <div class="layui-row">
            <div class="layui-col-xs6">
                <div class="layui-form-item">
                    <label class="layui-form-label">衔级</label>
                    <div class="layui-input-inline">
                        <select name="city" lay-verify="required">
                            <option value=""></option>
                            <option value="0">北京</option>
                            <option value="1">上海</option>
                            <option value="2">广州</option>
                            <option value="3">深圳</option>
                            <option value="4">杭州</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="layui-col-xs6">

                <div class="layui-form-item">
                    <label class="layui-form-label">上级领导</label>
                    <div class="layui-input-inline">
                        <select name="city" lay-verify="required">
                            <option value=""></option>
                            <option value="0">北京</option>
                            <option value="1">上海</option>
                            <option value="2">广州</option>
                            <option value="3">深圳</option>
                            <option value="4">杭州</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-row">
            <div class="layui-col-xs6">
                <div class="layui-form-item">
                    <label class="layui-form-label">职务</label>
                    <div class="layui-input-inline">
                        <select name="city" lay-verify="required">
                            <option value=""></option>
                            <option value="0">北京</option>
                            <option value="1">上海</option>
                            <option value="2">广州</option>
                            <option value="3">深圳</option>
                            <option value="4">杭州</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="layui-col-xs6">
                <div class="layui-form-item">
                    <label class="layui-form-label">军人证号</label>
                    <div class="layui-input-inline">
                        <input type="text" name="title" required lay-verify="required" placeholder="请输入标题"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-row">
            <div class="layui-col-xs6">
                <div class="layui-form-item">
                    <label class="layui-form-label"><i class="x-required-tip">*</i>身份证号</label>
                    <div class="layui-input-inline">
                        <input type="text" name="title" required lay-verify="required" placeholder="请输入标题"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-col-xs6">
                <div class="layui-form-item">
                    <label class="layui-form-label">性别</label>
                    <div class="layui-input-inline">
                        <input type="radio" name="sex" value="男" title="男" checked="">
                        <input type="radio" name="sex" value="女" title="女">
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-row">
            <div class="layui-col-xs6">
                <div class="layui-form-item">
                    <label class="layui-form-label">登录密码</label>
                    <div class="layui-input-inline">
                        <select name="city" lay-verify="required">
                            <option value=""></option>
                            <option value="0">北京</option>
                            <option value="1">上海</option>
                            <option value="2">广州</option>
                            <option value="3">深圳</option>
                            <option value="4">杭州</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="layui-col-xs6">
                <div class="layui-form-item">
                    <label class="layui-form-label">确认密码</label>
                    <div class="layui-input-inline">
                        <input type="text" name="title" required lay-verify="required" placeholder="请输入标题"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-row">
            <div class="layui-col-xs6">
                <div class="layui-form-item">
                    <label class="layui-form-label"><i class="x-required-tip">*</i>手机号码</label>
                    <div class="layui-input-inline">
                        <input type="text" name="title" required lay-verify="required" placeholder="请输入标题"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-col-xs6">

                <div class="layui-form-item">
                    <label class="layui-form-label">邮箱</label>
                    <div class="layui-input-inline">
                        <select name="city" lay-verify="required">
                            <option value=""></option>
                            <option value="0">北京</option>
                            <option value="1">上海</option>
                            <option value="2">广州</option>
                            <option value="3">深圳</option>
                            <option value="4">杭州</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-row">
            <div class="layui-col-xs10">
                <div class="layui-form-item">
                    <label class="layui-form-label"><i class="x-required-tip">*</i>数据权限</label>
                    <div class="layui-input-inline">
                        <input type="text" name="title" required lay-verify="required" placeholder="请输入标题"
                               autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-col-xs2">
                <div class="layui-btn x-select-button" onclick="_fn.onSelectPower()">选择权限</div>
            </div>
        </div>


        <!-- 直接跟表单的按钮
        <div class="layui-form-item x-edit-bottom">
            <div class="layui-input-inline">
                <button class="layui-btn" lay-submit lay-filter="formDemo">保存</button>
                <button type="reset" class="layui-btn layui-btn-primary" onclick="_fn.onCloseModel()">关闭</button>
            </div>
        </div>-->
    </form>
</div>

<script src="../../../lib/layui/layui.all.js"></script>
<script src="../../../lib/jquery-1.9.1.min.js"></script>
<script type="text/html" id="operateCol">
    <a class="x-operate-btn" lay-event="edit">
        <i class="layui-icon">&#xe642;</i>编辑</a>
    <a class="x-operate-btn" lay-event="del">
        <i class="layui-icon">&#xe640;</i>删除</a>
</script>
<script>
    // 表头配置
    var tableHead = [
        {type: 'checkbox'},
        {field: 'name', width: 120, title: '姓名', align: 'center'},
        {field: 'sex', width: 80, title: '性别', align: 'center'},
        {field: 'id', width: 120, title: 'ID', align: 'center'},
        {field: 'number', width: 120, title: '军官号', align: 'center'},
        {field: 'unit', title: '机构单位', align: 'center'},
        {field: 'title', title: '衔级', align: 'center'},
        {field: 'role', width: 120, title: '用户角色', align: 'center'},
        {field: 'date', width: 180, title: '有效期', align: 'center'},
        {field: 'state', width: 120, title: '用户状态', align: 'center'},
        {field: 'operate', width: 145, title: '操作', align: 'center', toolbar: '#operateCol'},
    ]
    // 表格数据模拟
    var data = [
        {uId: '1', name: '张三', sex: '男', number: '007', date: '2016/11/03-2017/11/03'},
        {uId: '2', name: '张三', sex: '男', number: '007', date: '2016/11/03-2017/11/03'},
        {uId: '3', name: '张三', sex: '男', number: '007', date: '2016/11/03-2017/11/03'},
        {uId: '4', name: '张三', sex: '男', number: '007', date: '2016/11/03-2017/11/03'},
        {uId: '5', name: '张三', sex: '男', number: '007', date: '2016/11/03-2017/11/03'},
        {uId: '6', name: '张三', sex: '男', number: '007', date: '2016/11/03-2017/11/03'},
        {uId: '7', name: '张三', sex: '男', number: '007', date: '2016/11/03-2017/11/03'},
        {uId: '8', name: '张三', sex: '男', number: '007', date: '2016/11/03-2017/11/03'},
        {uId: '9', name: '张三', sex: '男', number: '007', date: '2016/11/03-2017/11/03'},
        {uId: '10', name: '张三', sex: '男', number: '007', date: '2016/11/03-2017/11/03'},
        {uId: '11', name: '张三', sex: '男', number: '007', date: '2016/11/03-2017/11/03'},
        {uId: '12', name: '张三', sex: '男', number: '007', date: '2016/11/03-2017/11/03'},
        {uId: '13', name: '张三', sex: '男', number: '007', date: '2016/11/03-2017/11/03'},
        {uId: '14', name: '张三', sex: '男', number: '007', date: '2016/11/03-2017/11/03'},
        {uId: '15', name: '张三', sex: '男', number: '007', date: '2016/11/03-2017/11/03'},
        {uId: '16', name: '张三', sex: '男', number: '007', date: '2016/11/03-2017/11/03'},
    ]
    // ========================================================
    var table = layui.table
        , layer = layui.layer

    //表头设置
    var _fn = {
        // 初始化
        init: function () {
            this.loadTable(data)
            // 监控复选操作
            table.on('checkbox(myTable)', function (obj) {
                _fn.checkboxChange(obj)
            })
            // 编辑&删除
            table.on('tool(myTable)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                var tr = obj.tr; //获得当前行 tr 的DOM对象

                if (layEvent === 'del') { //删除
                    _fn.remove(obj)
                } else if (layEvent === 'edit') { //编辑
                    //do something
                    _fn.edit(obj)
                }
            });
        },
        /**
         * 加载表格
         * @param {array} data 表格数据
         */
        loadTable: function (data) {
            if (data) {
                table.render({
                    elem: '#myTable'
                    , limit: 10
                    // ,url: '/demo/table/user/' // 异步操作数据接口
                    , page: { //开启分页
                        theme: 'table',
                        layout: ['count', 'limit', 'prev', 'page', 'next', 'skip'],
                        prev: '上一页',
                        next: '下一页'
                    }
                    , cols: [tableHead]
                    , data: data
                });
            }
        },
        /**
         * 复选框变动执行
         */
        checkboxChange: function (obj) {
            console.log('当前复选操作！', obj)
        },
        /**
         * 编辑框
         */
        editBox: function (obj) {
            layer.open({
                title: obj.title || '用户',
                type: 1,
                btnAlign: 'c',
                area: ['780px', '500px'],
                shadeClose: true, //点击遮罩关闭
                btn: ['保存', '关闭'],
                content: layui.$('#editBox'),
                yes: function () {
                    // 保存
                    _fn.onSubmit()
                },
                btn2: function () {
                    // 关闭
                    _fn.onCloseModel()
                }
            })
        },
        /**
         * 保存数据
         */
        onSubmit: function () {
            layer.msg('提交数据到服务端')
            // 提交表单数据到服务端
            setTimeout(function () {
                _fn.onCloseModel()
            }, 2000)
        },
        /**
         * 关闭弹窗
         */
        onCloseModel: function () {
            layer.close(layer.index)
        },
        /**
         * 新建
         */
        add: function () {
            this.editBox({title: '新增'})
        },
        /**
         * 编辑
         */
        edit: function (obj) {
            this.editBox({title: '编辑用户'})
            //同步更新缓存对应的值
            obj.update({
                username: '123'
                , title: 'xxx'
            });
        },
        /**
         * 删除
         */
        remove: function (obj) {
            layer.confirm('真的删除这行么', function (index) {
                obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                layer.close(index);
                // todo:向服务端发送删除指令
            });
        },
        /**
         * 批量删除
         */
        onBulkRemove: function () {
            console.log(222)
            var checkStatus = table.checkStatus('myTable')
            var currentSelect = checkStatus.data // 当前选中行数据集合
            if (currentSelect.length > 0) {
                layer.msg('我批量删除了')
            } else {
                layer.msg('请至少选择一条数据')
            }
        },
        /**
         * 选择单位
         */
        onSelectUnit: function () {
            layer.msg('选择单位')
        },
        /**
         * 选择权限
         */
        onSelectPower: function () {
            layer.msg('选择单位')
        }
    }

    // 加载初始化
    _fn.init()

</script>
</body>
</html>